<script setup lang='ts'>
import {computed, CSSProperties, ref} from 'vue'
import {IconConfig} from '@/api/config'
import {showMessageBox} from '@/util/element'
import useConfig from '@/store/config'
import router from '@/router'
import screenfull from 'screenfull'

import homeTabs from './components/tabs.vue'
import dIcon from '@/components/dIcon.vue'
import { ElMessage } from 'element-plus'
import personalInfor from './components/personalInfor.vue'
import changePassword from './components/changePassword.vue'
import useUser from '@/store/user'
import printStatus from './components/printStatus.vue'
const config = useConfig.setup().store
const userStore = useUser.setup().store

const user = useUser.setup().store

const userName = computed(() => {
  return user.userInfor ? user.userInfor.userName : ''
})

const showPersonalDialog = ref<boolean>(false)
const showPasswordDialog = ref<boolean>(false)

const onChangeIsCollapse = () => {
  config.layout.menuCollapse = !config.layout.menuCollapse
}

const foldIconConfig:IconConfig = {icon:'Fold', type:'el', size:20, color:'var(--d-color-white)'}
const expandIconConfig:IconConfig = {icon:'Expand', type:'el', size:20, color:'var(--d-color-white)'}
const userIconConfig:IconConfig = {icon:'head-header', type:'custom', size:24}
const operIconConfig:IconConfig = {icon:'common-arrow', type:'custom', size:14, color:'var(--d-color-white)'}
const fullIconConfig:IconConfig = {icon:'head-full-screen', type:'custom', size:18, color:'var(--d-color-white)'}
const outIconConfig:IconConfig = {icon:'head-out-screen', type:'custom', size:18, color:'var(--d-color-white)'}

//下拉菜单指令
const onCommand = (command:string) => {
  if (command === 'outLogin') {
    showMessageBox('是否确定退出登录？', {title:'退出登录', mesageType:'base'}).then(() => {
      userStore.deleteToken()
      router.push({name:'Login'})
    }).catch((error) => {
      console.warn(error)
    })
  } else if (command === 'personal') {
    showPersonalDialog.value = true
  } else if (command === 'password') {
    showPasswordDialog.value = true
  }
}

const getSwitchStyle = () => {
  const style:CSSProperties = {}
  style.marginLeft = config.layout.menuCollapse ? 0 : '70px'
  return style
}

//全屏
const onFullClick = () => {
  if (!screenfull.isEnabled) {
    ElMessage.warning('全屏已被禁用')
    return
  }
  screenfull.toggle()
}

screenfull.onchange(() => {
  config.layout.fullScreen = screenfull.isFullscreen
})
</script>

<template>
  <div class="home-header d-common-flex-algin-center">
    <d-icon class="home-header-switch" :style="getSwitchStyle()" :icon-config="config.layout.menuCollapse?expandIconConfig:foldIconConfig" @click="onChangeIsCollapse" />
    <div class="d-common-text-main d-common-flex-algin-center home-header-user">
      <div class="home-header-full" @click="onFullClick">
        <d-icon :icon-config="config.layout.fullScreen?outIconConfig:fullIconConfig" />
      </div>
      <print-status />
      <!-- <span class="home-header-orgname home-header-font">{{ orgName }}</span> -->
      <d-icon class="home-header-usericon" :icon-config="userIconConfig" />
      <el-dropdown :show-timeout="100" :hide-timeout="100" @command="onCommand">
        <span class="d-common-flex-algin-center">
          <span class="home-header-font home-header-username">{{ userName }}</span>
          <d-icon :icon-config="operIconConfig" />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <!-- <el-dropdown-item command="personal">
              个人信息
            </el-dropdown-item>
            <el-dropdown-item command="password">
              修改密码
            </el-dropdown-item> -->
            <el-dropdown-item command="outLogin">
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
  <home-tabs />
  <personal-infor v-if="showPersonalDialog" :show-personal-dialog="showPersonalDialog" :user-infor="user.userInfor" @close="showPersonalDialog=false" />
  <change-password v-if="showPasswordDialog" :show-password-dialog="showPasswordDialog" @close="showPasswordDialog=false" />
</template>

<style scoped>
.home-header{
  height: var(--header-height);
  padding-left: var(--d-padding-level-3);
  padding-right: calc(var(--d-padding-level-3) * 2);
  background: linear-gradient(180deg, #5EBEC3 0%, var(--theme-color) 100%);
}
.home-header-switch{
  transition:all 0.3s ease;
}
.home-header-switched{
  transform-origin: center center;
  transform: rotate(90deg);
}
.home-header-user{
  margin-left: auto;
}
.home-header-full{
  margin-right: 30px;
  height: 30px;
  width: 30px;
  padding: 6px;
}
.home-header-font{
  color: var(--d-color-white);
}
.home-header-orgname{
  font-size: var(--d-font-size-title-second);
  margin-right: 46px;
}
.home-header-usericon{
  margin-right: var(--d-margin-level-1);
}
.home-header-username{
  margin-right: var(--d-margin-level-1);
}
</style>